<template>
  <div>
    <a-form layout="inline">
      <a-row :gutter="[16, 8]" style="margin-bottom: 20px;">
        <!-- 搜索 -->
        <a-col :xs="24" :sm="24" :md="8" :lg="6" :xl="7" :xxl="7">
          <edit-item :label="$t('DictionaryEncoding')" textAlign="left" labelWidth="''" >
           <a-select 
              v-model.trim="queryParams.dictCode" 
              :placeholder="$t('pleaseInput')+$t('DictionaryEncoding')"
              :show-search="true" 
              :allow-clear="true"
              :filterOption="$commonFun.filterOption"
              :loading="loading"
              @change="$emit('change')"
            >
              <a-select-option v-for="item in dictCodes" :title="item.code" :key="item.code" :value="item.code">
                {{ item.name }} ({{item.code}})
              </a-select-option>
            </a-select>
          </edit-item>
        </a-col>
        <a-col :xs="24" >
          <div class="searchBtns">
            <a-button-group>
              <auth-button type="primary" @click="handleSearch" :auth="managePerms.dict.view">
                <i class="iconfont icon-chazhao"></i>
                {{ $t('inquiry') }}
              </auth-button>
              <auth-button type="default" @click="clearCondition">
                <i class="iconfont icon-qingkong"></i>
                {{ $t('clear') }}
              </auth-button>
            </a-button-group>
            <auth-button type="primary" @click="handleAddNewFlow" :auth="managePerms.dict.add">
              <i class="iconfont icon-xinjian"></i>
              {{ $t('newly') }}字典项
            </auth-button>

            <auth-button type="primary" @click="addeDictionary" :auth="managePerms.dict.addDict">
              <i class="iconfont icon-xinjian"></i>
              {{ $t('newly') }}字典
            </auth-button>

            <auth-button type="danger" @click="handleBatchDelete" :auth="managePerms.dict.delete">
              <i class="iconfont icon-suoxiao1"></i>
              {{ $t('multiDel') }}
            </auth-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { managePerms } from '@/config/permission/index'
import { mapState } from 'vuex'
import EditItem from '@/components/EditItem'
import NewEditDict from './NewEditDict'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import { minxinDrawerUse } from '@/utils/mixin'
import AuthButton from '@/components/AuthButton'

const initDictData = {
  dictCode: '',
  name: '',
  remarks: '',
  value: '',
}
export default {
  mixins: [minxinDrawerUse],
  components: {
    EditItem,
    NewEditDict,
    CommonSelect,
    AuthButton
  },
  computed: {
    // 查询参数
    ...mapState({
      queryParams: (state) => state.dict.queryParamsDict
    })
  },
  props: {
    ids: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      disableBatchDeleteBtn: false,
      editRecord: null,
      dictCodes: [],
      loading: false,
      managePerms

    }
  },
  mounted () {
    this.getDictCode()
  },
  methods: {
    // 查询搜索
    handleSearch () {
      this.$emit('clickBtn')
    },
    // 重置搜索条件
    clearCondition () {
      this.queryParams.dictCode = undefined
      this.handleSearch()
    },
    // 点击批量删除按钮
    handleBatchDelete () {
      const that = this
      that.$confirm({
        title: that.$t('tip'),
        content: that.$t('deleteDictTip'),
        onOk () {
          that.$api.deleteDictCode({ ids: that.ids }).then(() => {
            that.$message.success(that.$t('successfullyDelete'))
            that.$parent.flushed()
            that.$parent.clearCheckbox()
            that.ids = []
          })
        }
      })
    },
    // 保存新增
    saveAddition (data) {
      const requestParameters = {
        dictCode: data.dictCode,
        dictItemName: data.name,
        dictItemRemarks: data.remarks,
        dictItemValue: data.value
      }
      this.$api.addDictCode(requestParameters).then(() => {
        this.$message.success(this.$t('successfullyOperation'))
        this.$parent.flushed()
        this.removeRightDrawer()
      })
    },
    // 点击新增
    handleAddNewFlow () {
      const vm = this
      const button = vm.getRightDrawerFooterButtons({
        method: 'saveAddition',
        callback () {
          vm.$parent.flushed()
        }
      })
      const vars = {
        editRecord: { ...initDictData, dictCode: this.queryParams.dictCode, dictCodes: this.dictCodes }
      }
      vm.showRightDrawer(NewEditDict, vm.$t('newly'), button, 'small', vars)
    },
    // 获取字典编码
    getDictCode () {
      this.$api.getDictList().then((res) => {  
        const newdata = res.data.map(item => (JSON.stringify(item)))
        this.dictCodes = [...new Set(newdata)].map(item => (JSON.parse(item)))
      })
    },
    // 新增字典
    addeDictionary () {
      console.log('第一步')
      this.$emit('addeDict')
    }
  }
}
</script>
<style scoped>
</style>
